<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8">
		<title>首页-百台云-直播你的梦想（https://www.100ytv.com）</title>
		<meta name="keywords" content="百台云">
		<meta name="description" content="百台云">
		<meta name="Copyright" content="百台云 All Rights Reserved">
		<meta name="Robots" content="All">
		<meta name="application-name" content="百台云 www.luoanziben.com">
		<meta name="msapplication-tooltip" content="百台云 www.luoanziben.com">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<!--title小图标显示--> 
		<link rel="icon" href="images/ico-logo.png" type="image/x-icon">
		<link rel="shortcut icon" href="images/ico-logo.png">
		<link rel="Bookmark" href="images/ico-logo.png">
		<!--样式文件-->
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bty.css" />
	</head>

	<body>
		<!--start:header头部-->
		<header id="bty_header" class="aui-bar aui-bar-nav">
			<a href="index-search.html" class="aui-pull-left aui-btn aui-btn-outlined bty-noborder">
				<span class="aui-iconfont aui-icon-search"></span>
			</a>
			<div class="aui-title" id="navTitle">商城</div>
			<a href="index-moreList.html" class="aui-pull-right aui-btn aui-btn-outlined bty-noborder">
				<span class="aui-iconfont aui-icon-more"></span>
			</a>
		</header>
		<!--end:header头部--->

		<!--start:内容区域-->
		<div class="bty-shops relative" id="bty-shops">
			<!--下拉时显示的文字-->
			<div class='msg-buffer xs-font text-gray absolute'><i class='aui-iconfont aui-icon-refresh'></i>没有更多内容了</div>
			
			<!--轮播组件-->
			<div class="aui-content ">
				<div id="aui-slide">
					<div class="aui-slide-wrap">
						<div class="aui-slide-node bg-dark">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图01" class="placeholder"/>    
						</div>
						<div class="aui-slide-node bg-dark">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图02" class="placeholder"/>    
						</div>
						<div class="aui-slide-node bg-dark">
							<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=轮播图03" class="placeholder"/>    
						</div>
					</div>
					<div class="aui-slide-page-wrap"></div>
				</div>
			</div>
	
			<!--分类按钮-->
			<div class="aui-content items-content clearfix">
				<a class="aui-col-5 items" href="index-arrangeList.html">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
				<a class="aui-col-5 items" href="">
					<img options="fsize=25&color=#ffffff&text=按钮" class="placeholder"/>         
				</a>
			</div>
	
			<!--start:商品列表-->
			<div class="aui-content">
				<div class="aui-card-list aui-text-justify bty-shopslist-card" id="bty_shopsCard">
					<div class="aui-card-list-header text-center bty-block bty-listTitle bg-white small-wall"> 推荐商品 </div>
					<div id="shopsBox" class="clearfix">
						<a href="shopDetail.html">
							<div class="bty-shopslist bg-white">
								<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=商品" class="placeholder bty-shopsItem"/>    
								<div class="items-shopName text-overflow overflow-hidden">
									商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
								</div>
								<div class="items-shopPrice">
									<span class="price-now">￥<span>1000,00</span></span>
									<span class="price-before">￥<span>9999,99</span></span>
								</div>
							</div>
						</a>
						
						<a href="shopDetail.html">
							<div class="bty-shopslist bg-white">
								<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=商品" class="placeholder bty-shopsItem"/>    
								<div class="items-shopName text-overflow overflow-hidden">
									商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
								</div>
								<div class="items-shopPrice">
									<span class="price-now">￥<span>1000,00</span></span>
									<span class="price-before">￥<span>9999,99</span></span>
								</div>
							</div>
						</a>
					</div>
				</div>
				<!--提示语句-->
			</div>
			<div class="msg-nomore xs-font text-gray">没有更多内容了</div>
			<!--end:商品列表-->
	
		</div>
		<!--end:内容区域-->
		
		<!--start:footer-->
		<footer class="aui-bar aui-bar-tab" id="footer">
		    <a href="index.html" class="aui-bar-tab-item aui-active" tapmode>
		        <i class="aui-iconfont aui-icon-home"></i>
		        <div class="aui-bar-tab-label">商城</div>
		    </a>
		    <a href="onlive.html" class="aui-bar-tab-item" tapmode>
		        <i class="aui-iconfont aui-icon-video"></i>
		        <div class="aui-bar-tab-label">直播</div>
		    </a>
		    <a href="shopCart.html" class="aui-bar-tab-item" tapmode>
		        <i class="aui-iconfont aui-icon-cart"></i>
		        <div class="aui-bar-tab-label">购物车</div>
		    </a>
		    <a href="my.html" class="aui-bar-tab-item" tapmode>
		        <i class="aui-iconfont aui-icon-my"></i>
		        <div class="aui-bar-tab-label">我的</div>
		    </a>
		</footer>
		<!--end:footer-->
	</body>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/aui-slide.js"></script>
	<script type="text/javascript" src="js/aui-tab.js"></script>
	<script type="text/javascript" src="js/aui-pull-refresh.js"></script>
	<script type="text/javascript" src="js/aui-scroll.js"></script>
	<script type="text/javascript" src="js/aui-toast.js"></script>
	
	<script src="js/placeholder.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/zepto.js" charset="utf-8"></script>
	<script type="text/javascript">
		//头部脚部占位div
 		$('#bty_header').after('<div style="height:'+ $('#bty_header').height()  +'px"></div>');
 		$('#footer').after('<div style="height:'+ $('#footer').height()  +'px;background:#fff;"></div>');
		
		//轮播图组件
		var slide = new auiSlide({
			container: document.getElementById("aui-slide"),
			"height":200,
			"speed": 500,
			"autoPlay": 3000,
			"loop": true,
			"pageShow": true,
			"pageStyle": 'dot',
			'dotPosition': 'center',
		})

		//footer选择效果
		var tab = new auiTab({
       		element:document.getElementById("footer"),
	        index:1,
	        repeatClick:false
	    },function(ret){
			var label_btn = document.getElementsByClassName('aui-bar-tab-label')[ret.index-1];
			navTitle.innerText = label_btn.innerText;
	    });

	    //下拉刷新效果
	    var toast = new auiToast({});
	    function down_pull(){
	    	var pullRefresh = new auiPullToRefresh({
	    		container: document.querySelector('#bty-shops'),
	    		triggerDistance: 100
	    	}, function(ret) {
	    		if(ret.status == "success") {
	    			setTimeout(function() { 
	    				toast.success({
	                        title: "成功！",
	                        duration: 800
	                    });
	    				pullRefresh.cancelLoading(); 
		    		}, 800);
	    		}
	    	})
	    }
		down_pull();
		
		//上拉添加列表
		function the_shop(){
			var wrap = document.getElementById("shopsBox");
			var lis = wrap.querySelectorAll('.bty-shopslist');
			for(var i = lis.length, length = i + 0.1 ; i < length; i++) {
				var html ='<a href="shopDetail.html"><div class="bty-shopslist bg-white">'+
					'<img options="bgcolor=#ccc&color=#ffffff&fsize=10&text=商品" class="placeholder bty-shopsItem"/> '+
					'<div class="items-shopName text-overflow overflow-hidden">'+
					'商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div><div class="items-shopPrice"><span class="price-now">￥<span>'+
					'1000,00'+'</span></span><span class="price-before">￥<span>'+
					'9999,99</span></span></div></div></a>';
//				wrap.insertAdjacentHTML('afterbegin', html);
				wrap.insertAdjacentHTML('beforeEnd', html);
			}
			shops_display();
		}
		  
		//商品列表布局
		function shops_display(){
			var bty_shopslist=document.getElementsByClassName('bty-shopslist');
			for(var k = 0; k < bty_shopslist.length; k++) {
				if(k%2==!0){
					bty_shopslist[k].style.float = "right";
				}else if(k%2==0){
					bty_shopslist[k].style.float = "left";
				}
			}
		}
		shops_display();			

		//滚动条的监听,上拉动
	     var scroll = new auiScroll({
		    listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
		    distance:250 //判断到达底部的距离，isToBottom为true
		},function(ret){
			the_shop();
//			setTimeout(function() { 
//			}, 1000);
			
		});
		
	</script>
</html>

 